<template>
  <div :style="{ border: `1px solid ${borderColor}`, width: `${width}` }">
    <Toolbar
      :style="{ borderBottom: `1px solid ${borderColor}` }"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: `${height}px`, overflowY: 'hidden' }"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
/**
 * 文件上传成功后，返回的接口格式
{
    "errno": 0, // 注意：值是数字，不能是字符串
    "data": {
        "url": "xxx", // 图片 src ，必须
        "alt": "yyy", // 图片描述文字，非必须
        "href": "zzz" // 图片的链接，非必须
    }
}
*/

export default {
  components: { Editor, Toolbar },
  props: {
    height: {
      type: Number,
      default: 300
    },
    width: {
      type: String,
      default: '100%'
    },
    borderColor: {
      type: String,
      default: '#ccc'
    },
    action: {
      type: String,
      required: true
    },
    meta: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: this.action,
            fieldName: 'file',
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: this.meta,
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 2 * 1024 * 1024,
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 20,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 超时时间，默认为 10 秒
            timeout: 10 * 1000 // 10 秒
            // onBeforeUpload: file => {
            //   console.log(file)
            //   return false
            // }
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    // 富文本
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange() {
      this.$emit('onChange', this.html)
    },
    // 专门给调用的父组件，通过ref获取组件实例，调用此方法完成数据的获取
    getHtml() {
      // 在获取数据时，进行图片宽度的处理，为了在移动端回显时不会出现图片只显示部份
      return this.html.replace(/\<img/gi, `<img width="100%"`).replaceAll("'", '"')
    },
    setHtml(html = '') {
      this.html = html
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped></style>
